<template>
    <div id="description">
        <back operation="" :Title="$route.query.descriptionName"></back>
        <div class="img_main">
            <img-list :ListImgs="imgs" :isBogShow="true"></img-list>
        </div>

        <infinite-loading
            spinner="spiral"
            @infinite="infiniteHandler" 
            ref="infiniteLoading"
            :distance="200"
        >
            <div slot="no-more">
                <bot></bot>
            </div>
           
        </infinite-loading>
    </div>
</template>

<script> 

import Back from "../components/back.vue"
import imgList from "../components/ImgList.vue"
import Bot from "../components/bot.vue"

import {listUrl} from "../api/Pictures" 
export default {
    name: 'Description',
    components:{
        Back,imgList,Bot
    },
    data() {
        return {
            page:1,//页码
            size:10,//记录数
            const:0,//总数
            imgs:[]

        };
    },

    mounted() {
       
    },
    methods: {
        //下拉加载
         infiniteHandler($state){
            setTimeout(async()=>{
              let {data}= await listUrl({
                    ID:this.$route.query.ID,
                    pageNum:this.page
                    ,size:this.size
            })
            if(data.code===200){
                let  {total,records}=data.data

                this.imgs=this.imgs.concat(records)
                this.const=total
                this.page+=1
            }
            if(this.imgs.length<this.const){
                $state.loaded();
            }else{
                $state.complete();
            }
         })
         
         

        },
        
    },
};
</script>

<style lang="scss" scoped>
    #description{
        width: 100vw;
        padding-top: 10vh;
        overflow:auto;  
    }
    .col{
        width: 100%;
        height: 8vh;
        font-size: 4vh;
        text-align: center;
        line-height: 8vh;
    }
    .img_main{
        position: relative;
        margin: auto;
        width: 90%;
    }
    
</style>